<template>
  <view class="appointment-invitation" v-cloak>
    <view class="calendar">
      <uni-calendar :date="curDate" @change="handleChangeDate" />
    </view>
    <view class="invitation-date"><image class="img" src="@/static/time-gray.png" mode="aspectFill"></image> {{curDate}}邀请项</view>
    <view class="home-tabs not-bar">
      <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabsList" :key="idx" @click="curTabs = idx">{{item}}</view>
    </view>
    <view class="invitation-list" v-if="list[curTabs].length">
      <view class="list-item" v-for="(item,idx) in list[curTabs]" :key="idx">
        <view class="item-info">
          <view class="h2 dot">{{item.realName}}</view>
          <view class="info-p">
            <view class="label">项目</view> {{item.appointmentItemCategoryId}}
            <view style="font-size: 22rpx;color: #D1D1D1;margin: 0 20rpx;"> | </view>
            <view class="label">医生</view> {{item.realName}}
          </view>
          <view class="info-p">
            <view class="label">预约时间</view> {{item.appointmentTime}}
          </view>
        </view>
        <view class="item-handle">
          <view class="button" v-if="item.status == '0'" @click="handleToUrl('/doctorPackage/invitation-detail')">去预约</view>
          <view class="success" v-if="item.status == '2'"><uni-icons type="checkmarkempty" size="14"></uni-icons>已预约</view>
          <view class="button cancel" v-if="item.status == '2'" @click="handleCancel(item)">取消</view>
        </view>
      </view>
    </view>
    <view class="var-empty" v-else>暂无数据</view>
  </view>
</template>

<script>
import { format } from '../utils/Tools';

  export default {
    data() {
      return {
        curTabs:0,
        curDate:'',
        tabsList:['全部','已完成','未完成'],
        list:[]
      };
    },
    onLoad() {
      this.curDate = format(Date.now())
      this._initData({
        inviteDate:format(Date.now())
      })
    },
    methods:{
      handleChangeDate(e){
        this.curDate = e.fulldate
        this._initData({
          inviteDate:e.fulldate
        })
      },
      handleToUrl(url){
        uni.navigateTo({
          url
        })
      },
      handleCancel(e){
        uni.showModal({
          title:'是否取消预约',
          success: (res) => {
            if(res.confirm){
              uni.showLoading({
                title:'加载中...'
              })
              this.$get('/yahe/appointment/cancel',{id:e.id},'1').then(res=>{
                if(res.code == '1'){
                  this.$toast('提交成功')
                  setTimeout(()=>{
                    this._initData({inviteDate:this.curDate})
                  },1000)
                }else{
                  this.$toast(res.message)
                }
              })
            }
          }
        })
      },
      
      ///  network
      _initData(e){
        uni.showLoading({
          title:'加载中...'
        })
        this.$get('/yahe/appointment/appointmentInviteList',e,'1').then(res=>{
          if(res.code == '1'){
            const {content} = res
            this.list = content
            content.map(ret=>{
              this.tabsList = [`全部(${content.all&&content.all.length})`,`已完成(${content.complete&&content.complete.length})`,`未完成(${content.incomplete&&content.incomplete.length})`]
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.appointment-invitation{
  .calendar{
    padding: 24rpx;
    padding-top: 0;
    ::v-deep .uni-calendar-item__weeks-box{
      border:2rpx solid transparent;
    }
    ::v-deep view.item--uni-calendar-item--isDay,::v-deep view.item--uni-calendar-item--checked{
      border-radius: 50%!important;
      border:2rpx solid var(--theme-color)!important;
      opacity: 1!important;
    }
    ::v-deep.uni-calendar-item__weeks-box-text{
      background-color: transparent!important;
    }
    ::v-deep.uni-calendar-item--isDay,::v-deep.uni-calendar-item--checked{
      background-color: var(--theme-color-10)!important;
      color: var(--title-color)!important
    }
    ::v-deep.uni-calendar-item--isDay-text{
      color: var(--theme-color)!important;
      background-color: transparent!important;
    }
  }
  .invitation-date{
    line-height: 80rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: var(--title-color);
    background: var(--page-bg);
    .img{
      width: 26rpx;
      height: 26rpx;
      margin-right: 4rpx;
    }
  }
  .home-tabs{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-left: 24rpx;
    overflow-x: auto;
    background: #fff;
    .tabs-item{
      font-size: 28rpx;
      color: #6D6D6D;
      position: relative;
      padding: 28rpx 0;
      margin-right: 44rpx;
      white-space: nowrap;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 34rpx;
        height: 6rpx;
        background: transparent;
        bottom: 14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
      &.active{
        font-weight: bold;
        color: var(--theme-color);
      }
      &.active::after{
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      }
    }
  } /// home-tabs end
  
  .invitation-list{
    padding: 0 24rpx;
    .list-item{
      padding: 44rpx 0;
      border-bottom: 2rpx solid #efefef;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child{
        border-bottom: 0;
      }
      .item-info{
        flex: 1;
        .h2{
          font-size: 28rpx;
          font-weight: bold;
          color: var(--title-color);
        }
        .info-p{
          display: flex;
          align-items: center;
          margin-top: 20rpx;
          font-size: 24rpx;
          color: var(--title-color);
          .label{
            color: var(--sub-title);
            margin-right: 8rpx;
          }
        }
      }
      .item-handle{
        .success{
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #6D6D6D;
          justify-content: center;
        }
        .button{
          margin-bottom: 24rpx;
          color: #fff;
          line-height: 56rpx;
          width: 142rpx;
          text-align: center;
          background: var(--theme-color);
          border-radius: 8rpx;
          font-size: 24rpx;
          border: 2rpx solid var(--theme-color);
          &.cancel{
            border-color: var(--border-color);
            color: #6D6D6D;
            background: #fff;
          }
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
    }
  } // invitation-list end
}
</style>
